Brand Guide

Where the look came from

The reference was a desk covered in printed infographic sheets — pale paper, thin connector lines, circular icon badges, donut charts, and a palette of petrol blue, sage, amber and terracotta. Everything in this guide is an attempt to make a screen behave like that desk: matte, generous, colourful without shouting.

The group has no home

LightSpeed is international, and nothing it publishes should say where it lives. No head-office address, no home currency, no national holidays, no "our region". A reader in Chicago and a reader in Manchester should both find it unremarkable.

• Three cities carry the group: New York, London, Tokyo. They are the clocks on the room signs, the legs of the partner tour and the datelines on documents. Use them when a place is needed
• Vary the dateline between artifacts. The letter is written from London, the deck is presented in New York, the tour visits all three. No single one is home
• Names are Western. Written for English-speaking markets, which are the primary audience
• Regions, never nations, in aggregate figures. North America, Europe, Asia Pacific, Middle East, Latin America. Country breakdowns are fine where a country breakdown is the actual point
• Dollars throughout, and metric distance. Dates as 17 October 2026, which is unambiguous on both sides of the Atlantic

Spelling follows American usage — license, not licence — while the prose register stays neutral.

Numerals are always tabular

Every figure in the system carries font-variant-numeric: tabular-nums. A number that changes while you watch it — a live counter, a mark-to-market value, a clock — must not shift the characters around it. This is the single most common thing to forget and the most obvious when it is wrong.

How it is built

The lead block carries data-lead (how many pixels of content sit between it and the fold) and data-max (a ceiling, so a tall display does not produce an absurd hero). A script sets its height to innerHeight − itsTop − tail − 16, capped. An empty .foldstop element after it takes whatever viewport is left, which pushes the next section onto the second screen.

It re-runs on resize, on load, and after document.fonts.ready. Bind those as function(){fitFold()}, never as the bare function — see section 11.

Hover previews, and how long to wait

A control that navigates somewhere should be able to say where, before it is pressed. The deck's next and previous buttons preview the slide they lead to, and the progress bar previews any slide you point at. The delays are deliberate:

• Escape dismisses, per WCAG 2.2 success criterion 1.4.13
• Keyboard focus shows the tip immediately — someone tabbing to a control has already committed to it
• A preview says where, not what. Slide number, section, title. Never a second copy of the content
• Never a tooltip on something that is already labelled. If the control needs a tip to be understood at all, the control is wrong

The slide a presenter lingers on

A title slide is on screen while somebody introduces themselves, which is longer than any other slide in the deck. It is the one place where a still page reads as a dead page, and the one real advantage this format has over a PDF. It carries three loops, none of which should be noticeable on their own:

It is one gesture, and it runs left to right across the whole slide. Not several loops running at once — a single nine-second pass that hands off from one element to the next, then rests for five seconds.

Because the chevrons point the way the deck advances, the sweep says forward as well as saying the company’s name. The rule bar is set to exactly the width of the title so the pass reads as one straight line, and the mark sits centred in the space between the title and the edge of the page.

Behind all of it, two washes drift — teal and amber at 13% alpha, 38 and 46 seconds, out of phase — so the frame is never quite static even during the rest.

One gesture, not several. An earlier version also pulsed the small corner mark and drew an underline beneath the date. With three things moving, none of them read as intentional. The corner mark now drops its icon on this slide entirely — the wordmark alone is enough, and the logo should appear at full size once, not three times on one screen.

Nothing on a title slide may move fast, bounce, or repeat on a cycle shorter than four seconds. If a viewer can time the loop, it is too quick. And every keyframe begins at full opacity, so the gallery thumbnail is never caught mid-fade.

The two curves

Arrivals use cubic-bezier(.22, 1, .36, 1) — fast out, long settle. Counters use a cubic ease-out in script. There is no bounce anywhere in the system, and nothing loops except the live dot and the flight paths.

Every looping animation stops for reduced motion. Every page in this group carries a prefers-reduced-motion: reduce block that cancels the loops and leaves the finished state on screen. A drawn line ends drawn; an underline ends underlined.

Navigation runs off intent, never off measured position. Asking the scroll container "where am I" during an animation answers with the slide you just left, so a fast run of clicks appears to do nothing. The position advances the instant a click lands; the scroll listener only re-syncs when the user scrolls by hand. See section 14.

Every animated number must settle. A counter that is still climbing when the screenshot is taken is a broken screenshot. Each one force-writes its final value after 1.8 seconds regardless of what the animation frame is doing.

Sizing in vmin, and why

A wall sign has to be right on a ten-inch door tablet and on a twenty-seven-inch panel, and a slide has to be right in a window and on a projector. Fixed pixel type cannot do both. Everything in the display register is sized against vmin, so the whole composition scales as one thing instead of reflowing.

Signs also carry a landscape rule: past a 1:1 aspect ratio the layout moves to two columns rather than letting content run off the bottom. A sign that overflows is a sign that lies.

The heat map

Sensitivity grids get their own five-step scale, and it is the only place in the system where colour encodes a magnitude rather than a subject: Terracotta below 10%, Amber to the 18% hurdle, Sage to 26%, Teal to 34%, Petrol above. The cell matching the current controls carries a Graphite outline so the reader can see where they are standing.